<template>
  <div class="video-panel" v-if="videoList.length > 1">
    <div class="video-panel-title">
      <div class="title">
        视频选集
        <span class="video-count">{{ currentP }} / {{ videoList?.length }}</span>
        <span class="iconfont icon-list"></span>
      </div>
      <el-switch v-model="autoPlay" inactive-text="自动连播"></el-switch>
    </div>
    <el-scrollbar :max-height="600" class="video-list">
      <div
        :class="['video-item', index == currentP - 1 ? 'active' : '']"
        v-for="(item, index) in videoList"
        @click="selectVideo(index + 1)"
        :key="index"
      >
        <div class="playing" v-if="index == currentP - 1"></div>
        <div class="title" :title="item.fileName">P{{ index + 1 }} {{ item.fileName }}</div>
        <div class="duration">
          {{ convertSecondsToHMS(item.duration) }}
        </div>
      </div>
    </el-scrollbar>
  </div>
</template>

<script setup lang="ts">
import { videoPListHttpRequest, type VideoP } from '@/services/api/video'
import { onMounted, onUnmounted, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { convertSecondsToHMS } from '@/utils/utilsFun'
import { mitter } from '@/eventbus/eventBus'

const route = useRoute()
const router = useRouter()

const videoList = ref<VideoP[]>([])
const currentP = ref(route.query.p ? Number.parseInt(route.query.p as string) : 1)
const autoPlay = ref(true)
//获取视频分P
const getVideoPList = async () => {
  const res = await videoPListHttpRequest(route.params.videoId)
  videoList.value = res.data
  console.log(res, '视频分P列表')

  selectVideoFile()
}
getVideoPList()

//刷新页面加载的分P
const selectVideoFile = () => {
  console.log(videoList.value[currentP.value - 1].fileId, '文件ID文件ID文件ID文件ID')

  mitter.emit('changeP', videoList.value[currentP.value - 1].fileId)
}

//切换分P
const selectVideo = (index: number) => {
  currentP.value = index
  router.push({
    path: route.path,
    query: {
      p: index
    }
  })
}

onMounted(() => {
  //视频播放完成之后
  mitter.on('playEnd', () => {
    //如果勾选了自动播放并且视频分P数量大于1并且当前选中的分P是小于视频分P总数量的情况下就自动播放下一个分P视频
    if (autoPlay.value && videoList.value.length > 1 && currentP.value < videoList.value.length) {
      selectVideo(currentP.value + 1)
    }
  })
})

onUnmounted(() => {
  mitter.off('playEnd')
})
</script>

<style lang="less" scoped>
.video-panel {
  margin-top: 20px;
  background: #f1f2f3;
  border-radius: 5px;
  padding: 10px;

  .video-panel-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .title {
      padding: 10px;
      font-size: 16px;
      .video-count {
        font-size: 14px;
        color: var(--text3);
      }
      .icon-list {
        font-size: 18px;
        cursor: pointer;
        margin-left: 10px;
        color: #757575;
        &:hover {
          color: var(--blue);
        }
      }
    }
  }

  .video-list {
    .video-item {
      padding: 6px 8px;
      display: flex;
      align-items: center;
      cursor: pointer;
      margin-top: 5px;
      border-radius: 3px;

      .playing {
        width: 14px;
        height: 14px;
        margin-right: 5px;
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
        background-image: url('@/assets//playing.gif');
      }
      .title {
        flex: 1;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }

      .duration {
        margin-left: 5px;
      }

      &:hover {
        background-color: #fff;
      }
    }
    .active {
      background-color: #fff;
    }
  }
}
</style>
